<template>
  <div class="page-container">
    <el-button type="primary" @click="fetchDefinitions" style="margin-bottom: 20px;">
      刷新列表
    </el-button>

    <el-table :data="definitions" border stripe style="width: 100%" v-loading="loading">
      <el-table-column align="center" prop="id" label="ID" width="250"></el-table-column>
      <el-table-column align="center" prop="key" label="Key"></el-table-column>
      <el-table-column align="center" prop="name" label="名称"></el-table-column>
      <el-table-column align="center" prop="version" label="版本" width="80"></el-table-column>
      <el-table-column align="center" prop="deploymentId" label="部署ID" width="250"></el-table-column>
      <el-table-column align="center" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="row.suspended ? 'info' : 'success'" size="small">
            {{ row.suspended ? '已暂停' : '激活' }}
          </el-tag>
        </template>
      </el-table-column>
      <!-- 新增操作列 -->
      <el-table-column align="center" label="操作" width="120">
        <template #default="{ row }">
          <el-button size="small" type="success" @click="handleStartProcess(row)">
            开启流程
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 启动流程对话框 -->
    <el-dialog title="启动流程" v-model="dialogVisible" width="400px">
      <el-form :model="form" label-width="80px">
        <el-form-item label="流程名称">
          <span>{{ currentDefinition?.name }}</span>
        </el-form-item>
        <el-form-item label="流程Key">
          <span>{{ currentDefinition?.key }}</span>
        </el-form-item>
        <el-form-item label="负责人" required>
          <el-input v-model="form.assignee" placeholder="请输入任务处理人ID" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitStartProcess">确定启动</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import {ElMessage} from "element-plus";

const definitions = ref([])
const loading = ref(false)
const dialogVisible = ref(false)
const currentDefinition = ref(null)
const form = ref({
  assignee: 'user1'
})

// 获取流程定义列表
const fetchDefinitions = async () => {
  loading.value = true
  try {
    const res = await axios.get('/api/workflow/definitions')
    definitions.value = res.data || []
  } catch (err) {
    console.error('获取流程定义失败:', err)
    ElMessage.error('获取流程定义失败')
  } finally {
    loading.value = false
  }
}

// 打开启动流程对话框
const handleStartProcess = (definition) => {
  currentDefinition.value = definition
  form.value.assignee = 'user1' // 默认值
  dialogVisible.value = true
}

// 提交启动流程请求
const submitStartProcess = async () => {
  if (!form.value.assignee.trim()) {
    ElMessage.warning('请填写负责人')
    return
  }

  const processKey = currentDefinition.value.key
  const variables = {
    assignee: form.value.assignee.trim()
  }

  try {
    const res = await axios.post(`/api/workflow/start/${processKey}`, variables)
    ElMessage.success(res.data || '流程启动成功！')
    dialogVisible.value = false
  } catch (err) {
    console.error('启动流程失败:', err)
    ElMessage.error('启动失败: ' + (err.response?.data || err.message))
  }
}

// 页面加载时获取数据
fetchDefinitions()
</script>

<style scoped>
.page-container {
  padding: 20px;
}
</style>
